<template>
  <div class="sub">
    <div class="sub-img">
      <img src="@/assets/login/login.png" alt />
    </div>
    <div class="login">
      <div>妩 翎 衣 服 装 商 场</div>
      <div>输入账号密码登录系统</div>
      <div>
        <el-input size="medium" v-model="login.name" placeholder="请输入账号"></el-input>
      </div>
      <div>
        <el-input size="medium" show-password v-model="login.pass" placeholder="请输入密码"></el-input>
      </div>
      <div>
        <el-button size="medium" style="width:100%" type="primary" @click="onLogin">登录</el-button>
      </div>
      <div>版权：妩翎衣服装商场 <span class="zc" @click.stop="dialogVisible = true">注册</span>
      <div class="tourist">
        <span @click="$router.push({ path: '/home' })">游客进入</span>
      </div>
      </div>
      
    </div>
    <!-- 对话框 -->
    <el-dialog
      title="注册"
      :visible.sync="dialogVisible"
      width="25%"
      top="5%"
      :before-close="cancel"
      :close-on-click-modal="false"
      destroy-on-close
      append-to-body
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="用户名称" prop="name">
          <el-input  clearable placeholder="请输入名称" v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="用户密码" prop="pass">
          <el-input  show-password clearable placeholder="请输入密码" v-model="form.pass"></el-input>
        </el-form-item>

        <el-form-item label="用户性别" prop="gender">
          <el-radio-group clearable v-model="form.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" >
        
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="onUser">立即注册</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { register, add_User } from "@/api/login/api";
export default {
  data() {
    return {
      dialogVisible: false,
      login: {
        name: "",
        pass: "",
        type: 2
      },
      form: {
        id: "",
        name: "",
        pass: "",
        gender: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, message: "长度大于两位", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请选择输入密码", trigger: "blur" },
          { min: 6, message: "长度大于六位", trigger: "blur" }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }]
      }
    };
  },

  mounted() {
    const c = setTimeout(() => {
      document.getElementById("bodys").classList.remove("not-loaded");
      clearTimeout(c);
    }, 1000);
  },
  methods: {
    // 登录接口
    onLogin() {
      if (this.login.name == "" || this.login.pass == "") {
        this.$message.info("请输入名称或密码");
        return;
      }
      register(this.login).then(res => {
        let data = res.data;
        if (!data.user) {
          this.$message.error("名称或密码输入错误！！！");
          return;
        }
        if (data.user.state == 2) {
          this.$message.info("该账户已被管理员禁用！！！");
          return;
        }
        if (data.user.type == 2) {
          localStorage.setItem("user", JSON.stringify(data.user));
        }
        this.$message.success("登录成功");
        this.$router.push({ path: "/home" });
      });
    },
    // 取消
    cancel() {
      this.dialogVisible = false;
      this.resetForm();
    },
    // 清空表单数据
    resetForm() {
      this.form = {
        id: "",
        name: "",
        pass: "",
        gender: ""
      };
    },
    // 添加或修改用户
    onUser() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id == "") {
            add_User(this.form).then(res => {
              let data = res.data;
              if (data == "ok") {
                this.resetForm();
                this.$message.success("注册成功！！！");
                this.dialogVisible = false;
              } else {
                this.resetForm();
                this.$message.error("注册失败！！！");
                this.dialogVisible = false;
              }
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.sub {
  display: flex;
  justify-content: center;
  margin-top:6%;
}
.sub-img {
  width: 40%;
  margin-right: 50px;
}
.sub-img img {
  width: 100%;
  height: 100%;
}
.login {
  width: 25%;
  margin-top: 4%;
  color: #606060;
}
.login > div {
  width: 100%;
}
.login > div:nth-child(1) {
  font-size: 28px;
}
.login > div:nth-child(2) {
  font-size: 14px;
  margin-top: 25px;
}
.login > div:nth-child(3) {
  margin-top: 5px;
}
.login > div:nth-child(n + 4) {
  margin-top: 25px;
}
.zc{
  cursor: pointer;
}
.tourist {
 cursor: pointer;
  margin-top: 20px;
}
</style>


